<!--
 * @Author: wangming
 * @Date: 2020-09-15 17:25:12
 * @LastEditors: wangming
 * @LastEditTime: 2022-04-20 15:52:49
 * @Description: file content
-->
<template>
  <el-checkbox-group
    v-if="!viewInfo"
    :disabled="disabled"
    :value="keyList"
    @input="inputbox"
  >
    <el-checkbox
      v-for="(item, index) in checkboxlist"
      :label="item.value"
      :key="index"
      >{{ item.label }}</el-checkbox
    >
  </el-checkbox-group>
  <div
    v-else
    :style="{
      display: 'inline-block',
      whiteSpace: 'break-spaces',
      width: config.__config.width + '%',
    }"
  >
    <el-tag
      class="mr5"
      v-for="(item, index) in viewLableList"
      :key="index"
      type="info"
      >{{ item.label }}</el-tag
    >
  </div>
</template>

<script>
import myMixin from "@/pageComponents/myMixin";
import vmMixin from "@/pageComponents/vmMixin";
import { postHmhttprequestdefinitionExecute } from "@/apis/paas/HmHttpRequestDefinitionController.js";
import { dataToList } from "@/utils/util";
import { getHmdictionaryOptions } from "@/apis/paas/HmDictionaryController.js";
import { getVueComponent } from "@/utils/common.js";
export default {
  mixins: [myMixin, vmMixin],
  vmEvents: {
    getSelectData() {
      return this.checkboxlist.filter((i) => {
        return this.keyList.indexOf(i.value) > -1;
      });
    },
  },
  data() {
    return {
      checkboxlist: [],
      keyList: [],
      viewLableList: [],
    };
  },
  watch: {
    value: {
      handler(value) {
        this.init(value);
      },
    },
  },
  async created() {
    await this.getApiOptions();
    this.init(this.value);
  },
  computed: {
    dataLoadFunction() {
      const { dataCustomLoadFn } = this.config.__config;
      return getVueComponent(dataCustomLoadFn);
    },
  },
  methods: {
    changeChildForm(box) {
      if (!!this.descForm) {
        let desc =
          this.checkboxlist
            .filter((i) => {
              return box.indexOf(i.value) > -1;
            })
            .map((i) => i.label) + "";
        this.descForm[this.config.modelName] = desc;
      }
    },
    inputbox(box) {
      const str = box.filter((i) => !!i).join("");
      this.$emit("input", str);
      this.runEventName("change", { values: str });
    },
    async getApiOptions() {
      const {
        modelKey,
        relationType,
        valueTeam,
        modelCode,
        dataCustomLoad,
        dataCustomLoadFn,
      } = this.config.__config;
      let data = [];
      if (dataCustomLoad && dataCustomLoadFn) {
        let options = await this.dataLoadFunction(
          this.vmEvents?.context,
          this.vmEvents?.exports,
          {
            type: relationType,
            value: relationType === "DICTIONARY" ? valueTeam : modelCode,
          }
        );
        data = dataToList(options).map(({ id, label }) => {
          return { value: `[${id}]`, label };
        });
      } else if (relationType === "DICTIONARY") {
        data = await getHmdictionaryOptions(
          { type: this.config.__config.valueTeam },
          { useCache: true }
        );
        data = data.map(({ optionValue, optionName, localism }) => ({
          label: this.$at(localism) || optionName,
          value: `[${optionValue}]`,
        }));
      } else if (modelKey) {
        data = await postHmhttprequestdefinitionExecute(
          {
            key: "selectList",
            modelKey,
            values: {
              fieldCode: this.config.modelName,
              _RELATION_TYPE_: "BUSINESS",
            },
          },
          { useCache: true }
        );
        data = data.map(({ id, label }) => {
          return { value: `[${id}]`, label };
        });
      }
      this.checkboxlist = data;
    },
    init(value) {
      let list = value ? (value + "").match(/[\w\u4e00-\u9fa5-]+/g) : [];
      this.keyList = list.map((i) => `[${i}]`);
      if (this.viewInfo) {
        this.viewLableList = this.checkboxlist.filter((item) =>
          this.keyList.includes(item.value)
        );
      }
      this.changeChildForm(this.keyList);
    },
  },
};
</script>

<style lang="scss" scoped></style>
